<template>
	<view class="page">
		<!-- 详情页面{{ trailerId }} -->
		<!-- 视频播放 start -->
		<view class="player"><video id="myVideo" :src="trailerInfo.trailer" :poster="trailerInfo.poster" class="movie" controls></video></view>
		<!-- 视频播放 end -->
		<!-- 影片基本信息 start -->
		<view class="movie-info">
			<navigator :url="'../cover/cover?cover=' + trailerInfo.cover"><image :src="trailerInfo.cover" class="cover"></image></navigator>
			<view class="movie-desc">
				<view class="title">{{ trailerInfo.name }}</view>
				<view class="basic-info">{{ trailerInfo.basicInfo }}</view>
				<view class="basic-info">{{ trailerInfo.originalName }}</view>
				<view class="basic-info">{{ trailerInfo.totalTime }}</view>
				<view class="basic-info">{{ trailerInfo.releaseDate }}</view>
				<view class="score-block">
					<view class="big-score">
						<view class="score-words">综合评分：</view>
						<view class="movie-score">{{ trailerInfo.score }}</view>
					</view>
					<view class="score-stars">
						<block v-if="trailerInfo.score >= 0"><trailerStars :innerScore="trailerInfo.score" :showNum="1"></trailerStars></block>
						<view class="praise-counts">{{ trailerInfo.prisedCounts }} 人点赞</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 影片基本信息 end -->

		<view class="line-wapper"><view class="line"></view></view>

		<!-- 剧情介绍 start -->
		<view class="plots-block">
			<view class="plots-title">剧情介绍</view>
			<view class="plots-desc">{{ trailerInfo.plotDesc }}</view>
		</view>
		<!-- 剧情介绍 end -->

		<!-- 演职人员 start -->
		<view class="scroll-block">
			<view class="plots-title">演职人员</view>
			<scroll-view scroll-x="true" class="scroll-list">
				<view v-for="director in directorArray" class="actor-wapper">
					<image :src="director.photo" class="single-actor" mode="aspectFill" @click="lookStaffs(director.photo)"></image>
					<view class="actor-name">{{ director.name }}</view>
					<view class="actor-role">{{ director.actName }}</view>
				</view>
				<view v-for="actor in actorArray" class="actor-wapper">
					<image :src="actor.photo" class="single-actor" mode="aspectFill" @click="lookStaffs(actor.photo)"></image>
					<view class="actor-name">{{ actor.name }}</view>
					<view class="actor-role">饰：{{ actor.actName }}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 演职人员 end -->

		<!-- 剧照 start -->
		<view class="scroll-block">
			<view class="plots-title">剧照</view>
			<scroll-view scroll-x="true" class="scroll-list">
				<image v-for="img in plotPicsArray" :src="img" class="plot-imge" mode="aspectFill" @click="lookMe(img)"></image>
			</scroll-view>
		</view>
		<!-- 剧照 end -->
	</view>
</template>

<script>
import trailerStars from '../../components/trailerStars.vue';
export default {
	data() {
		return {
			trailerInfo: {},
			// 剧照
			plotPicsArray: [],
			// 导演列表
			directorArray: [],
			// 演员列表
			actorArray: [],
			// 演职人员列表
			peopleArray: []
		};
	},
	// 页面初次渲染完成
	onReady() {
		this.videoContext = uni.createVideoContext('myVideo');
	},
	onHide() {
		this.videoContext.pause();
	},
	onShow() {
		// if(this.videoContext){
		// 	this.videoContext.play()
		// }
	},
	onLoad(e) {
		var me = this;
		// 请求qq
		uni.request({
			url: 'https://www.imovietrailer.com/superhero/sys/switches',
			method: 'POST',
			complete: function(res) {
				me.qq = res.data.ok;
				// 调用开始
				me.startPage(e)
			}
		});
	},
	// 此函数只支持小程序端的分享，分享到微信群和微信好友
	onShareAppMessage(res) {
		var me = this;
		console.log(res);
		return {
			title: me.trailerInfo.name,
			path: '/pages/movie/movie?trailerId=' + me.trailerInfo.id
		};
	},
	// 这是监听导航栏的按钮呢
	onNavigationBarButtonTap(res) {
		var me = this;
		// console.log(res)
		if (res.index == 0) {
			// 分享
			console.log('分享');
			// uni.share({
			//     provider: "weixin",
			//     scene: "WXSenceTimeline",
			//     type: 0,
			//     href: "http://localhost:8080/#/pages/movie/movie?trailerId=" + me.trailerInfo.id,
			//     title: me.trailerInfo.name,
			//     summary: me.trailerInfo.name,
			//     imageUrl: me.trailerInfo.cover,
			//     success: function (res) {
			//         console.log("success:" + JSON.stringify(res));
			//     },
			//     fail: function (err) {
			//         console.log("fail:" + JSON.stringify(err));
			//     }
			// });
		}
	},
	methods: {
		lookMe(url) {
			var me = this;
			uni.previewImage({
				urls: me.plotPicsArray,
				current: url
			});
		},
		lookStaffs(url) {
			var me = this;
			uni.previewImage({
				urls: me.peopleArray,
				current: url
			});
		},
		startPage(e) {
			var me = this;
			console.log(e);
			// 获取上一个页面传来的参数
			me.trailerId = e.trailerId;

			// 通过api修改导航栏的属性
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000000'
			});

			// 获取预告片的详细信息
			uni.request({
				url: me.serverUrl + '/search/trailer/' + me.trailerId + '?qq=' + me.qq + '&trailerId=' + me.trailerId,
				method: 'POST',
				success: function(res) {
					// console.log(res.data);
					if (res.data.status == 200) {
						me.trailerInfo = res.data.data;

						// 把剧照的字符串转换为json array
						me.plotPicsArray = JSON.parse(me.trailerInfo.plotPics);
					} else {
						console.log(res.data.msg);
					}
				}
			});

			// 获取导演
			uni.request({
				url: me.serverUrl + '/search/staff/' + me.trailerId + '/1?qq=' + me.qq,
				method: 'POST',
				success: function(res) {
					// console.log(res.data);
					if (res.data.status == 200) {
						me.directorArray = res.data.data;
						for (let directorArray of me.directorArray) {
							me.peopleArray.push(directorArray.photo);
						}
						// console.log(me.directorArray)
					} else {
						console.log(res.data.msg);
					}
				}
			});

			// 获取演员
			uni.request({
				url: me.serverUrl + '/search/staff/' + me.trailerId + '/2?qq=' + me.qq,
				method: 'POST',
				success: function(res) {
					console.log(res.data);
					if (res.data.status == 200) {
						me.actorArray = res.data.data;
						for (let actorArray of me.actorArray) {
							me.peopleArray.push(actorArray.photo);
						}
						// console.log(me.actorArray)
					} else {
						console.log(res.data.msg);
					}
				}
			});
		}
	},
	components: {
		trailerStars
	}
};
</script>

<style>
@import url('movie.css');
</style>
